<template>
	<view class="content">
		<view class="top-box">
			<view class="left-box">
				<view class="img-box">
					<image v-if="userInfo.tou_xiang == ''" class="img" src="../../static/minilogo.png" mode=""></image>
					<image v-if="userInfo.tou_xiang != ''" class="img" :src="base64Img(userInfo.tou_xiang)" mode="">
					</image>
				</view>
				<view class="user-name">
					{{userInfo.name}}
				</view>
			</view>
			<view class="right-box">
				<view class="right-setting-box" @click="gotoUseSetting()">
					<uni-icons type="gear" color="white" size="24"></uni-icons>
				</view>
			</view>
		</view>
		<view class="list-box">
			<view class="item-content">

				<view class="item1" @click="gotoVipCard()">
					<p>我的会员卡</p>
					<uni-icons type="right" color="black" size="16"></uni-icons>
				</view>
				<view class="item1" @click="gotoNouse()">
					<p>待使用</p>
					<uni-icons type="right" color="black" size="16"></uni-icons>
				</view>
				<view class="item1" @click="gotoHistoryList()">
					<p>历史订单</p>
					<uni-icons type="right" color="black" size="16"></uni-icons>
				</view>
				<view class="item1" @click="gotoChangGuanLogin()">
					<p>场馆入驻</p>
					<uni-icons type="right" color="black" size="16"></uni-icons>
				</view>
				<view class="item1" @click="gotoShiming()">
					<p>实名认证</p>
					<uni-icons type="right" color="black" size="16"></uni-icons>
				</view>
				<view class="item1">
					<p>更多功能，敬请期待</p>
					<uni-icons type="right" color="black" size="16"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getUserInfo
	} from '../../api/mine_api.js'

	import {
		onShow,
		onPageScroll,
		onReachBottom,
		onPullDownRefresh,
		onLoad
	} from '@dcloudio/uni-app'

	import {
		base64Img
	} from '../../tools/tools.js'

	import {
		ref,
		computed
	} from 'vue';

	const userInfo = ref({})

	const gotoZuduiView = () => {
		uni.navigateTo({
			url: `/pages/mine/zuiduiviews/dating-view`
		})
	}
	const gotoVipCard = () => {
		uni.navigateTo({
			url: `/views/vipCardView/vipCardView`,
		})
	}
	const gotoHistoryList = () => {
		uni.navigateTo({
			url: `/views/historyListView/historyListView`,
		})
	}
	const gotoChangGuanLogin = () => {
		uni.navigateTo({
			url: `/views/changuanruzhu/login/login`
		})
	}
	const gotoUseSetting = () => {
		uni.navigateTo({
			url: `/pages/mine/user-setting-view/user-setting-view`
		})
	}
	const gotoNouse = () => {
		uni.navigateTo({
			url: `/pages/mine/no-use-view/no-use-view`
		})
	}
	const gotoShiming = () => {
		uni.navigateTo({
			url: `/views/changuanruzhu/shimingrenzhengview`
		})
	}



	// 获取用户数据
	const _getUserInfo = (openid) => {
		getUserInfo(openid).then((res) => {
			userInfo.value = res.result
			console.log(res);
		})
	}

	onLoad(() => {
		uni.getStorage({
			key: 'openid',
			success: function(res) {
				_getUserInfo(res.data.openid)
			}
		})
	})
	onShow(() => {
		uni.getStorage({
			key: 'openid',
			success: function(res) {
				_getUserInfo(res.data.openid)
			}
		})
	})
</script>


<style scoped>
	@font-face {
		font-family: CustomFont;
		src: url('./iconfont.ttf');
	}
</style>

<style lang="scss" scoped>
	.content {
		background-color: #f5f5f6;
		min-height: 100vh;

		.top-box {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 20rpx;
			background-color: #93dfff;

			.left-box {
				padding-left: 40rpx;
				padding-top: 40rpx;
				padding-bottom: 40rpx;
				display: flex;

				.img-box {
					margin-right: 20rpx;

					.img {
						width: 140rpx;
						height: 140rpx;
						border-radius: 50%;
					}
				}

				.user-name {
					color: white;
					font-weight: 700;
					padding-top: 10rpx;
					font-size: 34rpx;
					max-width: 400rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.right-box {}

		}

		.list-box {
			margin: 20rpx;
			background-color: white;
			border-radius: 20rpx;
			padding: 20rpx;

			.item-content {
				padding: 10rpx;

				.item1 {
					display: flex;
					justify-content: space-between;
					padding: 30rpx 0;
				}
			}
		}
	}
</style>